<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../lib/echarts.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
</head>
<!-- 
  常用的全局方法
  init          功能:初始化实例对象,规定使用的主题
  registerTheme 功能:注册主题
  registerMap   功能:注册地图矢量数据
  connect       功能:将多个图片进行关联
 -->

<body>
  <div id="echarts" style="width: 600px;height:400px;border:1px solid red"></div>
  <div id="map" style="width: 600px;height:400px;border:1px solid red"></div>
  <script>
    let mCharts = echarts.init(document.getElementById('echarts'))
    const XDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
    const YDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
    let option = {
      toolbox:{
        feature:{
          saveAsImage:{}
        }
      },
      xAxis: {
        type: 'category', //设置为类目轴
        data: XDataArr

        // type: 'value'
      },
      yAxis: {
        type: 'value'
        // tyape: 'category',
        // data: XDataArr
      },
      series: [
        {
          name: '语文',
          type: 'bar',//柱状图
          data: YDataArr,
          // 标记
          markPoint: {
            data: [
              {
                type: 'max', name: "最大值"
              }, {
                type: 'min', name: '最小值'
              }
            ]
          },
          markLine: {
            data: [
              { type: "average", name: "平均值" }
            ]
          },
          label: {
            // 显示数值
            show: true,
            //数值旋转
            rotate: 60,
            // 标签的位置
            position: 'top'
          },
          // 柱的宽度
          barWidth: '60%',

        }
      ]
    }
    mCharts.setOption(option)

    // map
    let EchartsMap = echarts.init(document.querySelector('#map'))
    axios.get('../map/china.json').then(value => {
      echarts.registerMap('china', value.data)

      let mapOption = {
        geo: {
          type: 'map',
          map: 'china'
        }
      }
      EchartsMap.setOption(mapOption)

      // 关联两个图表
      // 关联后:保存图片自动拼接 刷新按钮,重置按钮,提示框浮动,图例,数据范围修改等...
      echarts.connect([mCharts, EchartsMap])
    })
  </script>
</body>

</html>